<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Dashboard">
    <meta name="keyword" content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">

    <title>DASHGUM - Bootstrap Admin Template</title>

    {% load static %}
    <link rel="stylesheet" href="{% static 'assets/css/style-qr.css' %}">
    <link rel="stylesheet" href="{% static 'assets/css/notice.min.css' %}">
    <link rel="stylesheet"
          href="{% static 'assets/css/default.min.css' %}">

    <!-- Bootstrap core CSS -->
    <link href="{% static 'assets/css/bootstrap.css' %}" rel="stylesheet">
    <!--external css-->
    <link href="{% static 'assets/font-awesome/css/font-awesome.css' %}" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="{% static 'assets/js/bootstrap-datepicker/css/datepicker.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'assets/js/bootstrap-daterangepicker/daterangepicker.css' %}" />
        
    <!-- Custom styles for this template -->
    <link href="{% static 'assets/css/style.css' %}" rel="stylesheet">
    <link href="{% static 'assets/css/style-responsive.css' %}" rel="stylesheet">

    <link href="{% static 'assets/css/purchase.css' %}" rel="stylesheet">
    <link href="{% static 'assets/css/the-datepicker.css' %}" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

  </head>

  <body>

  <section id="container" >
      <!-- **********************************************************************************************************************************************************
      TOP BAR CONTENT & NOTIFICATIONS
      *********************************************************************************************************************************************************** -->
      <!--header start-->
      <header class="header black-bg">
        <div class="sidebar-toggle-box">
            <div class="fa fa-bars tooltips" data-placement="right" data-original-title="Toggle Navigation"></div>
        </div>
      <!--logo start-->
      <a href="index.html" class="logo"><b>MD集团物料管理系统</b></a>
      <!--logo end-->
      <div class="nav notify-row" id="top_menu">
          <!--  notification start -->
      
  </header>
<!--header end-->

<!-- **********************************************************************************************************************************************************
MAIN SIDEBAR MENU
*********************************************************************************************************************************************************** -->
<!--sidebar start-->
<aside>
    <div id="sidebar"  class="nav-collapse ">
        <!-- sidebar menu start-->
        <ul class="sidebar-menu" id="nav-accordion">
        
              <p class="centered"><img src="{% static 'assets/img/ui-sam.jpg' %}" class="img-circle" width="60"></a></p>
              <h5 class="centered">物料管理</h5>
                  
            <li class="mt">
                <a href="{% url 'MM:login' %}">
                    <i class="fa fa-dashboard"></i>
                    <span>主页</span>
                </a>
            </li>

            <li class="sub-menu">
                <a href="javascript:;" >
                    <i class="fa fa-desktop"></i>
                    <span>供应商管理</span>
                </a>
                <ul class="sub">
                    <li><a  href="general.html">创建新供应商</a></li>
                    <li><a  href="buttons.html">查看或修改供应商信息</a></li>
                    {% comment %} <li><a  href="panels.html">Panels</a></li> {% endcomment %}
                </ul>
            </li>

            <li class="sub-menu">
                <a href="javascript:;" >
                    <i class="fa fa-cogs"></i>
                    <span>商品管理</span>
                </a>
                <ul class="sub">
                    <li><a  href="calendar.html">创建新商品</a></li>
                    <li><a  href="gallery.html">查看或修改商品信息</a></li>
                    <li><a  href="todo_list.html">查看商品库存</a></li>
                </ul>
            </li>
            {% comment %} <li class="sub-menu">
                <a href="javascript:;" >
                    <i class="fa fa-book"></i>
                    <span>采购订单管理</span>
                </a>
                <ul class="sub">
                    <li><a  href="blank.html">Blank Page</a></li>
                    <li><a  href="login.html">Login</a></li>
                    <li><a  href="lock_screen.html">Lock Screen</a></li>
                </ul>
            </li> {% endcomment %}
            <li class="sub-menu">
                <a class="active" href="javascript:;" >
                    <i class="fa fa-tasks"></i>
                    <span>收货管理</span>
                </a>
                <ul class="sub">
                    <li class="active"><a  href="form_component.html">创建商品收据</a></li>
                    <li class="active"><a  href="form_component.html">查看商品收据</a></li>
                    <li class="active"><a  href="form_component.html">创建发票收据</a></li>
                    <li class="active"><a  href="form_component.html">查看发票收据</a></li>
                    <li class="active"><a  href="form_component.html">付款</a></li>
                </ul>
            </li>
            <li class="sub-menu">
                <a href="javascript:;" >
                    <i class="fa fa-th"></i>
                    <span>采购订单管理</span>
                </a>
                <ul class="sub">
                    <li><a  href="/mm/purchaserequisition/getpq/">采购申请</a></li>
                    <li><a  href="/mm/quotation/vreview/">供应商评估管理</a></li>
                    <li><a  href="/mm/purchaseorder/searchpo/">采购订单</a></li>
                </ul>
            </li>
            

        </ul>
        <!-- sidebar menu end-->
    </div>
</aside>
      
      <!-- **********************************************************************************************************************************************************
      MAIN CONTENT
      *********************************************************************************************************************************************************** -->
      <!--main content start-->
      <section id="main-content">
          <section class="wrapper">
          	<h3><i class="fa fa-angle-right"></i> 创建采购申请</h3>
          	
          	<!-- BASIC FORM ELELEMNTS -->
          	<div class="row mt">
          		<div class="col-lg-12">
                  <div class="form-panel">
                  	  <h4 class="mb"><i class="fa fa-angle-right"></i> 基本信息</h4>
                      <form class="form-horizontal style-form" method="get">

                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">商品编码</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="goodcode">
                                <button type="button" class="btn btn-link " data-toggle="modal" data-target="#myModal1">忘记编号？</button>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">商品名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">产品组</label>
                            <div class="col-sm-10">
                                <input type="text"  class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">工厂</label>
                            <div class="col-sm-10">
                                <select type="text" class="form-control" id="factory" name="plant"></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">采购组织</label>
                            <div class="col-sm-10">
                                <select type="text" class="form-control" name="pOrg" ></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">采购组</label>
                            <div class="col-sm-10">
                                <select type="text" class="form-control" name="pgrp"></select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">公司编码信息</label>
                            <div class="col-sm-10">
                                <select type="text"  class="form-control" name="company"></select>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">估价</label>
                            <div class="col-sm-10" style="display: flex;">
                                <input type="text"  class="form-control" id="gujia">
                                <input type="text"  class="form-control" placeholder="单位" id="danwei"  onclick="currencyf()" name="currency" >
                            </div>
                        </div>

                      
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">数量</label>
                            <div class="col-sm-10">
                                <input type="text"  class="form-control" id="number">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label class="col-sm-2 col-sm-2 control-label">送货时间</label>
                            <div class="col-sm-10">
                                <input type="text" id="time" class="form-control">
                            </div>
                        </div>
                        <button type="button" class="btn btn-round btn-primary" id="btn-addgood" onclick="addgood()">添加商品</button>
                        
                      </form>
                  </div>
          		</div><!-- col-lg-12-->      	
          	</div><!-- /row -->
          
                            <!--结算货币modal-->
              <div class="col-sm-12">
                <div class="modal fade" id="myModalcurr" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
                    <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">货币</h4>
                        </div>
                        <div class="modal-body">
                        *双击填入货币
                        <table  class="table table-bordered table-striped table-condensed">
                            <thead>
                                <!-- tr 指定表行标签-->
                                <tr>
                                    <!-- th 设置表头内容，默认加粗-->
                                    <th style="width: 100px;">序号</th>
                                    <th style="width: 120px;">货币</th>
                                    <th>名称</th>
                                </tr>
                            </thead>
                            <tbody id="currDiv">

                            </tbody>
                        </table>

                            </div>
                            <div class="modal-footer">
                            </div>
                        </div>
                        </div>
                    </div>
                    </div>
                <!--结算货币modal-->




<!--搜索商品编码modal-->
              <div class="col-sm-12">
                <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                          <h4 class="modal-title" id="myModalLabel">搜索商品编码</h4>
                        </div>
                        <div class="modal-body">
                          <!-- Hi there, I am a Modal Example for Dashgum Admin Panel. -->
                          <!-- 搜索条件 -->
                          <form class="form-horizontal style-form" id="material" method="post">
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-4 col-sm-4 control-label">
                                        <div class="pull-right">商品名称:</div>
                                        </label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="mname" id="mname">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-4 col-sm-4 control-label">
                                        <div class="pull-right">商品类型:</div>
                                        </label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="industrySector" id="industrySector">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-4 col-sm-4 control-label">
                                        <div class="pull-right">储存位置:</div>
                                        </label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="mType" id="mType">
                                    </div>
                                    <div class="col-sm-2">
                                        <input class="btn btn-theme02" type="submit" name="submit" value="submit">
                                    </div>
                                </div>
                              </fieldset>
                        </form>
                        

                        <table  class="table table-bordered table-striped table-condensed">
                            <thead>
                                <!-- tr 指定表行标签-->
                                <tr>
                                    <!-- th 设置表头内容，默认加粗-->
                                    <th>表头1</th>
                                    <th>表头2</th>
                                </tr>
                            </thead>
                            <tbody id="searchDiv">


                            </tbody>
                        </table>
                        <script>
                            $('#material').on('submit', function(e) {
                                e.preventDefault();
                                $.ajax(
                                {
                                    type: "POST",
                                    data:{
                                        mname: $("#mname").val(),
                                        mType: $("#mType").val(),
                                        industrySector: $("#industrySector").val(),
                                        csrfmiddlewaretoken: '{{ csrf_token }}',
                                        dataType: "json"
                                    },
                                    success: function(data) {
                                      //  $('#material_result').text(data);
                                        var dataObj=eval("("+data+")");
                                        var out = "";
                                        var i;
                                        //"pk": 1, "fields": {"mname": "CHLK", "mType": "HALB", "mGroup": "AS", "meaunit": "ABC", "netWeight": 1, "weightUnit": "ABC", "transGrp": "T", "loadingGrp": "L", "industrySector": "I"}
                                        for(i = 0; i < dataObj.length; i++) {
                                            //out += '<p '+ dataObj[i].fields.mname + '>' + '</p><br>';<a href="basic_table.html#">Company Ltd</a>
                                            out += '<tr><td>'+ dataObj[i].pk+ '</td><td>' + dataObj[i].fields.mname +'</td><tr>';
                                        }
                                        document.getElementById("searchDiv").innerHTML=out;
                                    },
                                    failure: function() {
                
                                    }
                                })
                            });
                            $("table").on("dblclick","tr",function(e){
                                
                                document.getElementById("materialInput").value=$(this).find('td').eq(0).text();
                                $('#myModal1').modal('hide')
                                
                            })
                            
                        </script>
                        </div>
                        <div class="modal-footer">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
<!--搜索商品编码modal-->

              <div class="col-md-12 mt">
                <div class="content-panel">

                    <table class="table table-hover">
                     <div id="table-pr-head"> <h4><i class="fa fa-angle-right"></i> 商品信息</h4>
                    
                    </div>  
                        <thead>
                        <tr>
                            <th>条目编码</th>
                            <th>商品编码</th>
                            <th>工厂</th>
                            <th>估价</th>
                            <th>货币单位</th>
                            <th>数量</th>
                            <th>送货时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody id="gooddiv">
                        
                            
                    </tbody>
                    
                    </table>

                <div class="form-panel">
                      <h4 class="mb"><i class="fa fa-angle-right"></i> 订单信息</h4>
                    <form class="form-horizontal style-form" action="" method="post">

            <div class="form-group">
                <label class="col-sm-2 col-sm-2 control-label">备注</label>
                <div class="col-sm-10">
                    <input rows="3" type="text" id = "beizhu" name = "beizhu" class="form-control" name="text" ></input>
                </div>
            </div>
        </form>
        <div id="btn-pr-create">
            <button type="button" class="btn btn-primary btn-lg btn-block" onclick="create()">创建采购申请</button>
    </div>
    </div>
                    {{ message }}
                    {{ content }}

</div><! --/content-panel -->

</div><!-- /col-md-12 -->
		</section><! --/wrapper -->
      </section><!-- /MAIN CONTENT -->

      <!--main content end-->
      <!--footer start-->
      <footer class="site-footer">
          <div class="text-center">
              2022 - ERP
              <a href="pr-create.html" class="go-top">
                  <i class="fa fa-angle-up"></i>
              </a>
          </div>
      </footer>
      <!--footer end-->
  </section>

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="{% static 'assets/js/jquery.js' %}"></script>
    <script src="{% static 'assets/js/bootstrap.min.js' %}"></script>
    <script class="include" type="text/javascript" src="{% static 'assets/js/jquery.dcjqaccordion.2.7.js' %}"></script>
    <script src="{% static 'assets/js/jquery.scrollTo.min.js' %}"></script>
    <script src="{% static 'assets/js/jquery.nicescroll.js' %}" type="text/javascript"></script>
    <!--common script for all pages-->
    <script src="{% static 'assets/js/common-scripts.js' %}"></script>

    <!--script for this page-->
    <script src="{% static 'assets/js/jquery-ui-1.9.2.custom.min.js' %}"></script>

	<!--custom switch-->
	<script src="{% static 'assets/js/bootstrap-switch.js' %}"></script>
	
	<!--custom tagsinput-->
	<script src="{% static 'assets/js/jquery.tagsinput.js' %}"></script>
	
	<!--custom checkbox & radio-->

	<script src="{% static 'assets/js/form-component.js' %}"></script> 

    <script src="{% static 'assets/js/highlight.min.js' %}"></script>
    <script>
        hljs.highlightAll();
    </script>

    <script src="{% static 'assets/js/notice.min.js' %}"></script>
    <script>
        const notice = new Notice();
    </script>

    <script src="{% static 'assets/js/main-qr.js' %}"></script>
   
        <script src="{% static 'assets/js/the-datepicker.js' %}"></script>
        <script>
            (function () {
                var input = document.getElementById('time');
                var datepicker = new TheDatepicker.Datepicker(input);
                datepicker.render();
            })();
        </script>

        <script> 
            $(document).ready(function() {
            
                $.ajax(
                {
                    type: "post",
                    url: "{% url 'MM:ajax_load_currency' %}",
                    data:{
                        csrfmiddlewaretoken: '{{ csrf_token }}',
                    },
                    success: function(data) {
                        var dataObj = eval("("+data+")");
                        var out = "";
                        var i;
                        for(i = 0; i < dataObj.length; i++) {
                            out += '<tr><td>'+ i + '</td><td>' +dataObj[i].Currency + '</td><td>' + dataObj[i].Name +'</td><tr>';
                                //out += '<option value=' + +'>'+ dataObj[i].Currency + '--' + dataObj[i].Name + '</option>' ;
                        }
                        document.getElementById("currDiv").innerHTML=out;
                        
                    },
                    failure: function() {
    
                    }
                })
            });
            $("table").on("dblclick","tr",function(e){
                
                document.getElementById("danwei").value=$(this).find('td').eq(1).text();
                $('#myModalcurr').modal('hide')
                
            });

            $.ajax({
                type: "post",
                url: "{% url 'MM:ajax_load_plant' %}",
                data:{
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(data) {
                    var dataObj = eval("("+data+")");
                    var out = "<option value='' >请选择工厂</option>";
                    var i;
                    for(i = 0; i < dataObj.length; i++) {
                        out += '<option value=' + dataObj[i].Plant+'>'+ dataObj[i].Plant + '--' + dataObj[i].Name + '</option>' ;
                    }
                    //由于一个页面里有多个表单，所以用name寻找各个下拉框进行赋值
                    var items=document.getElementsByName("plant");
                    for(i = 0; i < items.length; i++) {
                        items[i].innerHTML=out;
                    }
                },
                failure: function() {

                }
            });

            $.ajax({
                type: "post",
                url: "{% url 'MM:ajax_load_porg' %}",
                data:{
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(data) {
                    var dataObj = eval("("+data+")");
                    var out = "<option value='' >请选择采购组织</option>";
                    var i;
                    for(i = 0; i < dataObj.length; i++) {
                        out += '<option value=' + dataObj[i].Porg+'>'+ dataObj[i].Porg + '--' + dataObj[i].Name + '</option>' ;
                    }
                    var items=document.getElementsByName("pOrg");
                    for(i = 0; i < items.length; i++) {
                        items[i].innerHTML=out;
                    } 
                },
                failure: function() {

                }
            });
            $.ajax({
                type: "post",
                url: "{% url 'MM:ajax_load_pgrp' %}",
                data:{
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(data) {
                    var dataObj = eval("("+data+")");
                    var out = "<option value='' >请选择采购组</option>";
                    var i;
                    for(i = 0; i < dataObj.length; i++) {
                        out += '<option value=' + dataObj[i].Pgrp+'>'+ dataObj[i].Pgrp + '--' + dataObj[i].Name + '</option>' ;
                    }
                    var items=document.getElementsByName("pgrp");
                    for(i = 0; i < items.length; i++) {
                        items[i].innerHTML=out;
                    } 
                },
                failure: function() {

                }
            });

            $.ajax({
                type: "post",
                url: "{% url 'MM:ajax_load_company' %}",
                data:{
                    csrfmiddlewaretoken: '{{ csrf_token }}',
                },
                success: function(data) {
                    var dataObj = eval("("+data+")");
                    var out = "<option value='' >请选择公司编码</option>";
                    var i;
                    for(i = 0; i < dataObj.length; i++) {
                        out += '<option value=' + dataObj[i].CompanyCode+'>'+ dataObj[i].CompanyCode + '--' + dataObj[i].Name + '</option>' ;
                    }
                    var items=document.getElementsByName("company");
                    for(i = 0; i < items.length; i++) {
                        items[i].innerHTML=out;
                    } 
                },
                failure: function() {

                }
            });

        </script>
        <script>
            function currencyf() {
                console.log(1);
    
                //弹出模态框
                
                $("#myModalcurr").modal("show")
            }
          
            
            //添加商品，需判断是否存在
            var i = 0;
function addgood() {
   // if(){
    var goodcode = document.getElementById("goodcode").value
    var factory = document.getElementById("factory").value
    var gujia = document.getElementById("gujia").value
    var danwei = document.getElementById("danwei").value
    var number = document.getElementById("number").value
    var time = document.getElementById("time").value
    var trStr = ''
    i+=10
    trStr = '<tr><td>' + i + '</td><td>' + goodcode  + '</td><td>' + factory + '</td><td>' + gujia + '</td><td>' + danwei + '</td><td>' + number + '</td><td>' + time + '<td><button class="btn btn-danger btn-xs" onclick="deleteTr(this)" id="shanchu"><i class="fa fa-trash-o "></i></button></td>' + '</td></tr>'
    document.getElementById("gooddiv").innerHTML += trStr;
    $(":input").val('');
    showMessage({text: '添加成功！',type: 'success'})
  //     }
  // else
  //  showMessage({text: '添加失败，商品不存在。',type: 'warning'})

}
function create(){ //提交表格，创建成功
    var tabLen = document.getElementById("gooddiv");
    var beizhu = $("#beizhu").val()
        var jsonT = "[";
        for (var i = 0; i < tabLen.rows.length; i++) {
                jsonT += '{"itemId":"' + tabLen.rows[i].cells[0].innerHTML + '","material_id":' + tabLen.rows[i].cells[1].innerHTML + ',"plant":"' + tabLen.rows[i].cells[2].innerHTML + '","estimatedPrice":' + tabLen.rows[i].cells[3].innerHTML + ',"currency":"' + tabLen.rows[i].cells[4].innerHTML + '","quantity":' + tabLen.rows[i].cells[5].innerHTML + ',"deliveryDate":"' + tabLen.rows[i].cells[6].innerHTML + '"},'
       //         jsonT += '{"itemId":"' + tabLen.rows[i].cells[0].innerHTML + '","material_id":' + tabLen.rows[i].cells[1].innerHTML + ',"plant":' + tabLen.rows[i].cells[2].innerHTML + ',"estimatedPrice":' + tabLen.rows[i].cells[3].innerHTML + ',"currency":"' + tabLen.rows[i].cells[4].innerHTML + '","quantity":' + tabLen.rows[i].cells[5].innerHTML + ',"deliveryDate":"' + tabLen.rows[i].cells[6].innerHTML + '"},'
        }
        jsonT= jsonT.substr(0, jsonT.length - 1);
        jsonT += "]";
        console.log(jsonT);
        console.log(beizhu)
        $.ajax({
            type: 'post',
            url: '',
            data:{"json":jsonT,"beizhu":beizhu},
            success: function (data) {
                let a = JSON.parse(data)
                showMessage({text: '创建成功！采购订单编号：'+a.content ,type: 'success',showClose: true, autoClose: false})
            }
        });     


}


function deleteTr(nowTr) {  
        if(confirm("您确认删除该商品吗？")){
            $(nowTr).parent().parent().remove();
    showMessage({text: '删除商品成功！',type: 'success'})
           return true;
        }
        else{
           return false;
        }
}
        </script>

       

</body>
</html>
